<template>
  <div>
    <h2 class="big-title">采购订单列表</h2>
    <br>
    <br>
    <el-input placeholder="请输入内容" v-model="seachText" class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button>
    </el-input>
    <br>
    <br>
    <hr>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="orderNo" label="单号" sortable width="180">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span> &nbsp;
          <el-tag size="mini" v-if="scope.row.deleted === true " type="danger">不可用</el-tag>
          <el-tag size="mini" v-else type="success">可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="factoryName" label="收货工厂" sortable width="100"></el-table-column>
      <el-table-column label="审核状态" width="100">
        <template slot-scope="scope">{{scope.row.auditStatus?'已审核':'已反审'}}</template>
      </el-table-column>
      <el-table-column prop="vendorCode" label="供应商代码"></el-table-column>
      <el-table-column prop="vendorName" label="供应商名称"></el-table-column>
      <el-table-column prop="createdBy" label="创建人" sortable></el-table-column>
      <el-table-column prop="createdDate" label="创建时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">{{getStatus(scope.row.status)}}</template>
      </el-table-column>
      <el-table-column prop="status" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-view"
            @click="openEditor(scope.row)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <br>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="totalNumber"
      @current-change="currentChange"
    ></el-pagination>
    <!-- 分割线 ---------------------->
    <el-dialog
      :title="'单号: ' +outerTitle +' 详情'"
      :visible.sync="outerVisible"
      :lock-scroll="false"
      top="60px"
      width="80%"
    >
      <div class="text-right">
        <el-popover placement="top" width="160" v-model="buttonVisible">
          <p>操作将会改变状态,确定此操作?</p>
          <div style="text-align: right; margin-right: 10px">
            <el-button size="mini" type="text" @click="buttonVisible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="configState">确定</el-button>
          </div>
          <el-button
            slot="reference"
            :type="formInline.deleted ? 'success' : 'danger'"
            :icon="formInline.deleted ? 'el-icon-delete' : 'el-icon-delete'"
          >设置为{{formInline.deleted ? '可用' : '不可用'}}</el-button>
        </el-popover>&nbsp;
        <!-- <el-button type="warning" icon="el-icon-share">冲销</el-button> -->
      </div>

      <el-form label-position="left">
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="单号:">
              <el-input max="10" disabled :value="formInline.orderNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="单据类型:">
              <el-input
                disabled
                :value="getOrderType(formInline.orderType||formInline.preOrderType)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="收货工厂:">
              <el-input disabled :value="formInline.factory&&formInline.factory.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="审核状态:">
              <el-input disabled :value="formInline.auditStatus?'已审核':'已反审'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="供应商代码:">
              <el-input disabled :value="formInline.vendorCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="供应商名称:">
              <el-input disabled :value="formInline.vendorName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="创建人:">
              <el-input disabled :value="formInline.createdBy"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建时间:">
              <el-input disabled :value="formInline.createdDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态:">
              <el-input disabled :value="getStatus(formInline.status)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否可用:">
              <el-input disabled :value="formInline.deleted ? '可用' : '不可用'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <h4 class="lin-h4">行项目</h4>

      <el-table :data="itemTable" style="width: 100%">
        <!-- <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="申请者">
                <span>{{ props.row.applicat }}</span>
              </el-form-item>
              <el-form-item label="单据数量">
                <span>{{ props.row.quantity }}</span>
              </el-form-item>
              <el-form-item label="已处理数量">
                <span>{{ props.row.receivedQuantity }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>-->
        <el-table-column label="行项目号" prop="orderItemNo"></el-table-column>
        <el-table-column label="SAP删除标识" prop="commonType">
          <template slot-scope="scope">
            <span>{{scope.row.sapDeleted ? '已删除' : '未删除'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类别" prop="category"></el-table-column>
        <el-table-column label="SAP库存地" prop="stockLocation"></el-table-column>
        <el-table-column label="单位" prop="unit"></el-table-column>
        <el-table-column label="申请者" prop="applicat"></el-table-column>
        <el-table-column label="单据数量" prop="quantity"></el-table-column>
        <el-table-column label="已处理数量" prop="quantity"></el-table-column>
        <el-table-column label="物料编号" prop="material.code"></el-table-column>
        <el-table-column label="物料描述" prop="material.name"></el-table-column>
      </el-table>

      <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getPurchaseOrders, setPurchaseOrders } from '@/api/putInStorage';
import { setStatus, setOrderType } from '@/util/fieldConfig.js';

export default {
  name: 'purchaseOrder',
  components: {},
  data() {
    return {
      buttonVisible: false,
      loading: true,
      itemTable: [], // 详情后的table
      formInline: {}, // 点击的当前行 所有数据
      outerTitle: '',
      outerVisible: false, // 第一层
      innerVisible: false,
      seachText: '',
      tableData: [],
      totalNumber: 0,
    };
  },
  created() {
    console.log('createdcreatedcreated');

    this.ininTableData();
  },
  computed: {
    // ...mapState({ token: state => state.user.token }),
  },
  methods: {
    ininTableData(searchKey = '', page = 0, size = 10) {
      const data = {
        searchKey,
        page,
        size,
        sort: 'id,asc',
      };
      if (!searchKey.length) delete data.searchKey;
      getPurchaseOrders(data).then(res => {
        this.tableData = res.data;
        this.totalNumber = Number(res.headers['x-total-count']);
        this.loading = false;
      });
    },
    handleClick() {
      this.loading = true;
      this.ininTableData(this.seachText);
      this.seachText = '';
    },
    currentChange(page) {
      this.loading = true;
      this.ininTableData('', page - 1);
    },
    getStatus(status) {
      return setStatus(status);
    },
    getOrderType(status) {
      return setOrderType(status);
    },
    openEditor(row) {
      console.log(row, 'row-row');
      this.formInline = row;
      this.itemTable = row.orderItems;
      this.outerTitle = row.orderNo;
      this.outerVisible = true;
    },
    configState() {
      const data = {
        id: this.formInline.id,
        deleted: !this.formInline.deleted,
      };
      setPurchaseOrders(data).then(res => {
        console.log(res);
        if (res.success) {
          this.formInline.deleted = !this.formInline.deleted;
          // this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
      this.buttonVisible = false;
    },
  },
};
</script>
